<template>
    <div>
        <div class="accounthead">
                <span>批量创建任务</span>
        </div>

      

       <div class="bigbox">

           <div class="newbody">
               <div class="newbodyhead"><span>2.批量导入</span></div>
           </div>

           <div class="downroad"  @click="downmodule">
               <i class="el-icon-download"></i>
               <span>下载模板</span>
           </div>

           <div class="downroadmoudle">
               <div>注意事项</div>
               <div>1. 请下载好模板并按模板格式填好上传。</div>
               <div>2. 不同主体/关键词间，请用+号连接。</div>
               <div>3. 若缺少任意字段，则会自动跳过该行，继续建立并执行后续的任务，请知悉。</div>
               <!-- <div>4</div>
               <div>5</div>
               <div>6</div>    -->
           </div>


            <div class="selectFiles">
                <input type="file" ref="inputFiles" class="fileBtn" />
                <div class="fileBtnbox"  @click="selectFile">
                    <i class="el-icon-upload2"></i>
                    <span>选取文件</span>
                </div>
            </div>
            <!-- <button @click="selectFile">选择文件</button>
            <input type="file" ref="inputFiles" class="fileBtn" /> -->
            

            <el-button style="margin-left: 10px;" size="small" type="primary" @click="sure">确定</el-button>
             <el-button @click="goahead">返回</el-button>

           <!-- <el-upload
            class="upload-demo"
            :show-file-list = false
            ref="upload"
            action="http://www.varyuan.top/task/insert/batch1"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <div class="selectFiles">
                <i class="el-icon-upload2"></i>
                <span>选取文件</span>
            </div>
            <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">确定</el-button>
             <el-button @click="goahead">返回</el-button>
            </el-upload> -->


       </div>
    </div>
</template>

<script>
import {teskFiveFiles} from '@/api'
export default {
    data () {
        return {
            fileList: []
        }
    },
    methods: {
        goahead() {
            this.$router.go(-1)
        },
        downmodule() {
            window.open('http://dy.6soft.com/task/download2')
        },
        selectFile() {
            this.$refs.inputFiles.click()
        },
        sure () {
            let files = this.$refs.inputFiles.files;
            // console.log(files)
            if(files.length <1) {
                 this.$message({
                     
                    message: '请选择文件',
                    type: 'warning'
                    })
                    return false
            } else {
                let file = files[0]
                // console.log(file)
                let nameInfo = file.name.split('.')
                // console.log(file.name.split('.'))
                if(nameInfo[1] != 'xls' && nameInfo[1] != 'xlsx') {
                    this.$message({
                    message: '仅支持excel文件',
                    type: 'warning'
                    })
                    return false
                } else {
                     this.$message({
                    message: '任务创建成功，请稍后',
                    type: 'success'
                    });
                    
                  let formData = new FormData();
                   let newNoken = localStorage.getItem('userToken')
                  formData.append('token', newNoken)
                  formData.append("templateFile", file)
                //   console.log(formData)
                    teskFiveFiles(formData)
                    .then(res => {
                        // console.log(res)
                        if(res.statusCode == 200) {
                            this.$message({
                                message: res.statusMsg,
                                type: 'success'
                                });
                            this.$router.push({path: '/finishFeature'})
                        } else {
                             this.$message.error(res.statusMsg);
                        }
                    })

                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
     .accounthead {
      background-color: #f9f6f9;
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        span {
            position: absolute;
            bottom: -9px;
            left:0;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }
    i {
        font-weight: 900;
    }
    

    .bigbox {
       background-color: #fff;
       height: 600px;
       padding-left: 161px;
        padding-right: 161px;
    }

    .newbody {
       background-color: #fff;
       width: 100%;
      //  padding-left: 69px;
       .newbodyhead {
          position: relative;
          text-align: left;
          font-size: 30px;
          height: 112px;
          line-height: 112px;
          span {
             position: absolute;
             left: -100px;
            //  margin-left: 69px;
          }
       }
    }

    .downroad {
        text-align: left;
        color: #316FCB;
        font-size: 18px;
        cursor: pointer;
    }

    .downroadmoudle {
         text-align: left;
         margin-left: 40px;
        font-size: 13px;
    }

    .selectFiles {
        z-index: 99;

        position: relative;
        // background-color: #fff;
        cursor: pointer;
        text-align: left;
        float: left;
        font-size: 18px;
        color: #904242;
        span {
            z-index: 9999;
            display: inline-block;
        }
    }
     .fileBtn {
        //  display: none;
        //  position: absolute;
        //  z-index: 1;
        outline: none;
        margin-left: 26px;
        }
        .fileBtnbox {
            position: absolute;
            top: 0;
            background-color: #fff;
        }
    .el-button {
        width: 116px;
        height: 45px;
        margin-top: 100px;
        float: right;
        margin-left: 10px;
    }
    
</style>

